/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

/**
 * 聚单客订单查询
 */
import React, { useEffect, useRef, useState } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import type { OrderItem } from '@/services/jdk/order';
import type { ConnectState } from '@/models/connect';
import { getJdkOrderList } from '@/services/jdk/order';
import DragTable from '@/components/DragTable';
import moment from 'moment';
import { useSelector } from 'umi';
import OrderDetail from '@/components/_pages/jdk/order/components/detail';
import type { ProFormInstance } from '@ant-design/pro-form';

const VehicleCallLogout: React.FC = () => {
  const actionRef = useRef<ActionType>();
  const formRef = useRef<ProFormInstance>();
  const formData = useRef<any>({
    status: 'all',
  });
  const { winSize } = useSelector((state: ConnectState) => state.global);
  const [orderNo, setOrderNo] = useState<string>('');
  const [currentPage, setCurrentPage] = useState(1);

  const columns: ProColumns<OrderItem>[] = [
    {
      title: '创建时间',
      hideInTable: true,
      valueType: 'date',
      fieldProps: {
        disabledDate: (current: any) => current && current > moment().endOf('day'),
        autoFocus: false,
      },
      formItemProps: {
        name: 'create_day',
      },
    },
    {
      title: '订单号',
      dataIndex: 'id',
      search: false,
      align: 'center',
      width: 250,
      ellipsis: true,
    },
    {
      title: '订单状态',
      dataIndex: 'order_desc',
      align: 'center',
      width: 150,
      ellipsis: true,
      initialValue: 'all',
      valueType: 'select',
      request: async () => [
        { label: '全部', value: 'all' },
        { label: '待接单', value: '2' },
        { label: '取货中', value: '3' },
        { label: '配送中', value: '4' },
        { label: '已完成', value: '6' },
        { label: '已取消', value: '7' },
        { label: '预约单', value: '1' },
        { label: '异常', value: '5' },
        { label: '其他平台已完成', value: '10' },
      ],
      fieldProps: {
        allowClear: false,
      },
      formItemProps: {
        name: 'status',
      },
    },
    {
      title: '用户账号',
      align: 'center',
      width: 150,
      hideInTable: true,
      ellipsis: true,
      fieldProps: {
        placeholder: '输入手机号',
      },
      formItemProps: {
        name: 'account',
      },
    },
    {
      title: '收件人手机号',
      align: 'center',
      width: 150,
      ellipsis: true,
      hideInTable: true,
      fieldProps: {
        placeholder: '输入手机号',
      },
      formItemProps: {
        labelCol: {
          span: 7,
        },
        name: 'sh_phone',
      },
    },
    {
      title: '创建时间',
      dataIndex: 'created_at',
      search: false,
      ellipsis: true,
      align: 'center',
      width: 200,
    },
    {
      title: '创建账号',
      dataIndex: 'account',
      align: 'center',
      search: false,
      width: 150,
      ellipsis: true,
    },
    {
      title: '发单店铺',
      dataIndex: 'shop_name',
      search: false,
      align: 'center',
      width: 150,
      ellipsis: true,
    },
    {
      title: '收件信息',
      dataIndex: 'receiver_address',
      search: false,
      align: 'center',
      width: 280,
      ellipsis: true,
    },
    {
      title: '运力平台',
      dataIndex: 'delivery_brand_name',
      search: false,
      align: 'center',
      width: 150,
      ellipsis: true,
    },
    {
      title: '接单时间',
      dataIndex: 'delivery_accept_time',
      search: false,
      align: 'center',
      width: 200,
      ellipsis: true,
    },
    {
      title: '订单号',
      dataIndex: 'order_no',
      align: 'center',
      hideInTable: true,
      width: 250,
      ellipsis: true,
    },
    {
      title: '运力单号',
      dataIndex: 'delivery_order_no',
      align: 'center',
      width: 250,
      ellipsis: true,
    },
    {
      title: '外卖订单号',
      dataIndex: 'source_order_no',
      align: 'center',
      width: 250,
      ellipsis: true,
    },
    {
      title: '第三方订单号',
      dataIndex: 'order_no',
      hideInTable: true,
      align: 'center',
      width: 150,
      ellipsis: true,
      fieldProps: {
        placeholder: '使用开放平台接口下单生的订单号',
      },
      formItemProps: {
        labelCol: {
          span: 7,
        },
        name: 'channel_identity',
      },
    },
    {
      title: '查看详情',
      search: false,
      align: 'center',
      width: winSize ? 120 : 80,
      ellipsis: true,
      fixed: 'right',
      renderText: (_, { id }) => {
        return (
          <a
            key={id}
            onClick={() => {
              setOrderNo(id);
            }}
            type='primary'
          >
            查看详情
          </a>
        );
      },
    },
  ];

  const getTableList = async (values: any) => {
    const { current: page, pageSize, ...rest } = values;
    const payload = {
      page,
      size: pageSize,
      ...rest,
      ...formData.current,
    };
    if (payload.status == 'all') {
      payload.status = '';
    }
    const tableData = await getJdkOrderList(payload);
    setCurrentPage(tableData.current);
    return tableData;
  };

  const beforeSearchSubmit = (params: any) => {
    const { status, ...rest } = params;
    return {
      status: status == 'all' ? '' : status,
      ...rest,
    };
  };

  useEffect(() => {
    // 防止从订单详情返回，清空数据
    if (!orderNo) {
      formRef.current?.setFieldsValue({
        create_day: formData.current.create_day,
        status: formData.current.status,
        account: formData.current.account,
        sh_phone: formData.current.sh_phone,
        delivery_order_no: formData.current.delivery_order_no,
        source_order_no: formData.current.source_order_no,
      });
    }
  }, [orderNo]);

  return (
    <PageContainer>
      {Boolean(orderNo) ? (
        <OrderDetail orderNo={orderNo} goBack={() => setOrderNo('')} />
      ) : (
        <DragTable>
          <ProTable<OrderItem>
            beforeSearchSubmit={beforeSearchSubmit}
            request={getTableList}
            columns={columns}
            className='kb-pro-table'
            actionRef={actionRef}
            formRef={formRef}
            rowKey='id'
            scroll={{
              x: 1200,
            }}
            toolBarRender={false}
            pagination={{
              current: currentPage,
              showSizeChanger: false,
            }}
            search={{
              defaultCollapsed: false,
            }}
            onSubmit={(values) => {
              formData.current = values;
            }}
            onReset={() => {
              formData.current = {
                status: 'all',
              };
            }}
          />
        </DragTable>
      )}
    </PageContainer>
  );
};

export default VehicleCallLogout;
